{% extends 'index.html' %}
{% load static %}
{% block mycss %}
    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>
    <script type="text/javascript" src="{% static "js/echarts/ecStat.js" %}"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'fishbone/html2canvas.js' %}"></script>
    <script src="{% static 'fishbone/fishBone2.js' %}"></script>
    <link rel="stylesheet" href="{% static 'fishbone/fishBone2.css' %}">
    <link href="{% static 'js/lib/layui/css/layui.css' %}" rel="stylesheet">
    <style>
        {#    修改tab切换页选中的颜色#}
        .nav-tabs.nav > li > a:hover, .nav-tabs.nav > li > a:focus {
            border-bottom: 1px solid #042c70;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            border-bottom: 1px solid #042c70;
        }
    </style>
{% endblock %}
{% block title %}
    <span class="navbar-page-title">军事需求图谱分析 - 分析助手</span>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <ul id="myTabs" class="nav nav-tabs" role="tablist">
                            <li class="active"><a href="#histogram" id="histogram-tab" role="tab" data-toggle="tab">统计直方图</a>
                            </li>
                            <li><a href="#Timeline" role="tab" id="Timeline-tab" data-toggle="tab">事件发生时间线</a></li>
                            <li><a href="#history" role="tab" id="history-tab" data-toggle="tab">历史分析展示</a></li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="histogram">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <select name="查询类型" id="search_type"
                                                class="btn btn-default dropdown-toggle my-select">
                                            <option value="">请输入查询类型</option>
                                            <option value="直方图查询">直方图查询</option>
                                            <option value="柱状图查询">柱状图查询</option>
                                        </select>
                                        {#                                    </div>#}
                                        {#                                    <div class="col-xs-5">#}
                                        <input type="text" id="histogram_text" placeholder="请输入查询节点"
                                               class="form-control my-input"
                                               style="display: inline;width: 400px;margin: 0 30px;">
                                        {#                                    </div>#}
                                        {#                                    <div class="col-xs-2">#}
                                        <button class='my-btn' type="submit" id="histogram_button">查询
                                        </button>
                                    </div>
                                </div>
                                <div id="histogram_pic" class=""
                                     style="width: 100%;margin-top:45px;height: calc(100vh - 325px)"></div>
                            </div>
                            <div class="tab-pane fade" id="Timeline">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <input type="text" placeholder="请输入查询节点" id="Timeline_text"
                                               class="form-control my-input">
                                    </div>
                                    <div class="col-xs-2">
                                        <button class='my-btn' type="submit" id="Timeline_button">查询
                                        </button>
                                    </div>
                                </div>
                                <div class="" style="width: 100%;height: 400%">
                                    <div class="wrapper" id="Timeline_pic" style="display: none;">
                                        <div class="fish-bone"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="history">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <input type="text" id="history_text" placeholder="请输入查询节点"
                                               class="form-control my-input">
                                    </div>
                                    <div class="col-xs-2">
                                        <button class='my-btn' type="submit" id="history_button">查看历史
                                        </button>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table id="history_tab" lay-filter="history_tab"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block myjs %}
    <script type="text/javascript" src="{% static 'js/lib/layui/layui.all.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>
    {#    <script type="text/javascript" src="{% static 'js/common.js' %}"></script>#}
    <script type="text/javascript">

        document.getElementById("jsxqtpfx").style.display = 'block';
        document.getElementById("fxzs").style.backgroundColor = 'rgba(30,21,21,0.44)';

        $('#histogram_button').click(function () {
            var search_text = $('#search_type').val();
            var histogram_text = $('#histogram_text').val();
            if (histogram_text === "" || search_text === "") {
                // alert("请输入查询类型和查询节点")
                console.log('请输入查询类型和查询节点')
                Mytoast.create("请输入查询类型和查询节点", 3000)
            } else {
                var formdata = new FormData();
                formdata.append("histogram_text", histogram_text);
                if (search_text === "柱状图查询") {
                    $.ajax({
                        url: '{% url 'bar_chart' %}',
                        type: 'POST',
                        async: false,
                        data: formdata,
                        processData: false, // 使数据不做处理
                        contentType: false, // 不要设置Content-Type请求头
                        success: function (data) {
                            if (data.data.xAxis_data.length === 0 && data.data.value_data.length === 0) {
                                alert(data.msg)
                            } else {
                                bar_chart(data.data.xAxis_data, data.data.value_data)
                            }
                        },
                        error: function (response) {
                            console.log(response);
                        }
                    });
                } else {
                    $.ajax({
                        url: '{% url 'histogram' %}',
                        type: 'POST',
                        async: false,
                        data: formdata,
                        processData: false, // 使数据不做处理
                        contentType: false, // 不要设置Content-Type请求头
                        success: function (data) {
                            if (data.data.length === 0) {
                                alert(data.msg)
                            } else {
                                histogram(data.data)
                            }
                        },
                        error: function (response) {
                            console.log(response);
                        }
                    });
                }
            }
        });
        $('#Timeline_button').click(function () {
            var Timeline_text = $('#Timeline_text').val();
            if (Timeline_text === "") {
                alert("请输入查询节点")
            } else {
                $.ajax({
                    url: '{% url 'timeline' %}',
                    type: 'GET',
                    async: false,
                    data: {"Timeline_text": Timeline_text},
                    success: function (data) {
                        if (data.data.length === 0) {
                            alert(data.msg)
                        } else {
                            fishbone(data.data)
                        }
                    },
                    error: function (response) {
                        console.log(response)
                    }
                })
            }
        });
        $('#history_button').click(function () {
            var history_text = $('#history_text').val();
            if (history_text === "") {
                alert("请输入查询查询节点")
            } else {
                history_table(history_text)
            }
        })

    </script>
    <script type="text/javascript">
        /**
         * 绘制柱状图
         */
        function bar_chart(xAxis_data, value_data) {
            console.log(xAxis_data, value_data);
            var title = $('#histogram_text').val()
            var myChart = echarts.init(document.getElementById('histogram_pic'));
            var option = {
                color: ['#3398DB'],
                title: {
                    text: `“${title}”出现频次`
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },

                xAxis: [{
                    type: 'category',
                    name: '日期',
                    data: xAxis_data,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        color: '#666666'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#666666'
                        },

                    },
                }],
                yAxis: [
                    {
                        type: 'value',
                        name: '频次',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#666666'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#666666'
                            },

                        },
                    }],
                series: [
                    {
                        name: `“${title}”出现频次`,
                        type: 'bar',
                        barWidth: '20%',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        markLine: {
                            symbol: 'none',
                            label: {
                                position: 'end',
                            },
                            data: [
                                {
                                    name: '平均线',
                                    type: 'average'
                                },
                            ],
                        },
                        data: value_data
                    }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        /**
         * 绘制直方图
         */
        function histogram(girth) {


            var dom = document.getElementById("histogram_pic");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;


            var bins = ecStat.histogram(girth);

            var interval;
            var min = Infinity;
            var max = -Infinity;

            var data = echarts.util.map(bins.data, function (item, index) {
                var x0 = bins.bins[index].x0;
                var x1 = bins.bins[index].x1;
                console.log(x1, x0)
                interval = x1 - x0;

                min = Math.min(min, x0);
                max = Math.max(max, x1);
                return [x0, x1, item[1]];
            });

            function renderItem(params, api) {
                var yValue = api.value(2);
                var start = api.coord([api.value(0), yValue]);
                var size = api.size([api.value(1) - api.value(0), yValue]);
                var style = api.style();

                return {
                    type: "rect",
                    shape: {
                        x: start[0] + 1,
                        y: start[1],
                        width: size[0] - 2,
                        height: size[1]
                    },
                    style: style
                };
            }

            option = {
                {#color: ["rgba(0, 0, 205, 1)"],#}
                color: ['rgb(25, 183, 207)'],
                grid: {
                    top: "8%",
                    left: "3%",
                    right: "3%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [{
                    type: 'value',
                    scale: true, //这个一定要设，不然barWidth和bins对应不上
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                }],
                {#xAxis: [#}
                {#    {#}
                {#        type: "value",#}
                {#        splitLine: {show: false},#}
                {#        /*改变y轴颜色*/#}
                {#        axisLine: {#}
                {#            lineStyle: {#}
                {#                color: "#1982ff",#}
                {#                width: 1 //这里是为了突出显示加上的#}
                {#            }#}
                {#        },#}
                {#        axisLabel: {#}
                {#            //字体颜色#}
                {#            show: true,#}
                {#            textStyle: {#}
                {#                color: "#ff0536"#}
                {#            }#}
                {#        },#}
                {#        min: min,#}
                {#        max: max,#}
                {#        interval: interval#}
                {#    }#}
                {#],#}
                {#yAxis: [#}
                {#    {#}
                {#        type: "value",#}
                {#        splitLine: {show: false},#}
                {#        /*改变y轴颜色*/#}
                {#        axisLine: {#}
                {#            lineStyle: {#}
                {#                color: "#1982ff",#}
                {#                width: 1 //这里是为了突出显示加上的#}
                {#            }#}
                {#        },#}
                {#        axisLabel: {#}
                {#            //字体颜色#}
                {#            show: true,#}
                {#            textStyle: {#}
                {#                color: "#ff0536"#}
                {#            }#}
                {#        }#}
                {#    }#}
                {#],#}
                yAxis: [{
                    type: 'value',
                    // TODO 横纵坐标轴名称
                    {#name:'次数',#}
                    axisTick: {
                        show: true,
                        inside: true
                    },
                    splitLine: {
                        show: false
                    },
                }],
                tooltip: {
                    trigger: "item",
                    formatter: function (parms) {
                        //
                        var str =
                            "金额范围分布统计" +
                            "</br>" +
                            "金额区间：" +
                            "" +
                            parms.data[0] +
                            "~" +
                            parms.data[1] +
                            "W" +
                            "</br>" +
                            parms.data[0] +
                            "~" +
                            parms.data[1] +
                            ":" +
                            parms.data[2] +
                            "万" +
                            "</br>";
                        return str;
                    }
                },
                series: [
                    {
                        name: 'height',
                        type: 'bar',
                        barWidth: '99.3%',
                        itemStyle: {
                            normal: {
                                borderColor: '#000'
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'insideTop',
                                formatter: function (params) {
                                    return params.value[1];
                                }
                            }
                        },
                        data: bins.data
                    }
                    {#{name: "height",#}
                    {#    type: "custom",#}
                    {#    renderItem: renderItem,#}
                    {#    encode: {#}
                    {#        x: [0, 1],#}
                    {#        y: 2,#}
                    {#        tooltip: 2,#}
                    {#        label: 2},#}
                    {#    data: data}#}
                ]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }


        function fishbone(data) {
            {#$('#Timeline').style.display = "";#}
            document.getElementById("Timeline_pic").style.display = "";
            var option = {
                data: data,
                color: "chocolate",
                dowload: true,
            };
            fishBone.init(".fish-bone", option);

        }
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
    <script>
        function history_table(data) {
            layui.use(['table', 'upload'], function () {
                var checkbox_set = new Set();
                var table = layui.table;
                var upload = layui.upload;
                // todo 表格渲染
                table.render({
                    parseData: function (res) {
                        for (var i in res.data) {
                            if (checkbox_set.has(res.data[i].id)) {
                                //如果set集合中有的话，给rows添加check属性选中
                                res.data[i]["LAY_CHECKED"] = true;
                            }
                        }
                        return {
                            "code": res.code, //解析接口状态
                            "count": res.count, //解析数据长度
                            "data": res.data //解析数据列表
                        }
                    },
                    elem: '#history_tab',
                    url: "{% url 'history_load' %}" + "?history_text=" + data
                    //,width: 900
                    //,height: 274
                    , defaultToolbar: []
                    , cols: [[ //标题栏
                        {type: 'checkbox', width: '10%'}
                        , {type: 'numbers', title: '序号', width: '10%', align: 'center'}
                        , {field: 'node', title: '节点', width: '20%', align: 'center'}
                        , {field: 'record', title: '记录', width: '20%', align: 'center'}
                        , {field: 'time', title: '时间', width: '20%', align: 'center'}
                        , {title: '操作', toolbar: '#barDemo', width: '20%', align: 'center'}
                    ]]
                    , id: 'history_tab'
                    , skin: 'row' //表格风格
                    , even: true
                    //,size: 'lg' //尺寸
                    , page: true //是否显示分页
                    , limits: [8, 20, 50]
                    , limit: 8 //每页默认显示的数量
                    //,loading: false //请求数据时，是否显示loading
                });


                // TODO 编辑与删除
                table.on('tool(history_tab)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'delete') {
                        console.log(data)
                        noumenon_del(obj, data.id);
                    }
                });


                table.on('checkbox(history_tab)',
                    function (obj) {
                        var table_checkbox_all = table.cache.history_tab;
                        if (obj.checked == true) {
                            if (obj.type == 'one') {
                                checkbox_set.add(obj.data.id)
                            }
                            if (obj.type == 'all') {
                                for (i = 0; i < table_checkbox_all.length; i++) {
                                    checkbox_set.add(table_checkbox_all[i].id);
                                }
                            }
                        } else {
                            if (obj.type == 'one') {
                                checkbox_set.delete(obj.data.id)
                            }
                            if (obj.type == 'all') {
                                for (i = 0; i < table_checkbox_all.length; i++) {
                                    checkbox_set.delete(table_checkbox_all[i].id);
                                }
                            }
                        }
                    });
            });
        }

        {#TODO 删除方法#}

        function noumenon_del(obj, id) {
            var histogram_text = $('#histogram_text').val();
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据

                $.getJSON('{% url 'history_delete' %}', {
                    id: id
                }, function (data) {
                    if (data.status == 1) {
                        history_table(histogram_text);
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    } else {
                        layer.msg('删除失败！', {icon: 1, time: 1000})
                    }

                })

            });
        }

    </script>

{% endblock %}



